<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="bgc" slot="top">
				<u-navbar :fixed="false" :title="$t('my.wallet.navBartext')" :autoBack="true" bgColor="transparent"></u-navbar>
				<view style="padding: 0 30rpx;">
					<view class="price">
						<u--text :text="$t('my.wallet.titleText')" color="#231916" margin="20px 0 7px 0" size="13"></u--text>
						<view class="price_text">
							<u--text :text="userInfo.money" color="#672A02" size="25" bold></u--text>
							<u-button :text="$t('my.wallet.btnText')" :customStyle="btnStyle" @click="goWithdraw"></u-button>
						</view>
					</view>
					<view class="tab">
						<u-tabs :keyName="language=='zh'?'zh':'en'" :activeStyle="activeStyle" inactiveStyle="color:#141414" :list="tabList"
							:itemStyle="itemStyle" lineWidth="21" lineHeight="21"
							:lineColor="`url(${lineBg}) 100% 100%`" :scrollable="false" @click="tabClick"
							:current="current"></u-tabs>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="record_list" v-if="dataList.length>0">
					<view class="record_item" v-for="(item,index) in dataList" :key="index">
						<view>
							<u--text :text="item.memo" size="15" margin="0 0 5px 0"></u--text>
							<u--text :text="item.createtime" size="14" color="#989898"></u--text>
						</view>
						<text class="item_price">{{item.money}}</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		mapGetters
	}from 'vuex'
	export default {
		data() {
			return {
				lineBg: "",
				dataList: [],
				btnStyle: {
					background: 'linear-gradient(180deg, #FF8824 0%, #DA4D00 100%)',
					borderRadius: '27px',
					height: "60rpx",
					width:"auto",
					padding:"0px 20px",
					border: "none",
					color: "#fff"
				},
				tabList: [{
					zh: '全部',
					en: 'ھەممىسى',
					type:0
				}, {
					zh: '收入',
					en:'كىرىم',
					type:1
				}, {
					zh: '支出',
					en:'چىقىم',
					type:2
				}],
				current: 0,
				activeStyle: {
					color: "#141414",
					fontWeight: "bold"
				},
				itemStyle: {
					height: "55px",
					marginBottom:"10rpx"
				}
			};
		},
		computed: {
			...mapGetters(['userInfo']),
			language() {
				return this._i18n.locale
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.$http.post('wanlshop/user/marginList',{
					page:pageNo,
					limit:pageSize,
					type:this.tabList[this.current].type
				}).then(res=>{
					if(res.code==1){
						this.$refs.paging.complete(res.data.list.data)
					}else{
						this.$refs.paging.complete(false)
					}
				})
			},
			tabClick(e) {
				this.current = e.index
				this.$refs.paging.reload()
			},
			goWithdraw(){
				uni.$u.route('/pagesA/my/withdraw');
			}
		}
	}
</script>
<style>
	page {
		background-color: #f3f5f7;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav__line {
		bottom: -14rpx !important;
	}

	.bgc {
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100% 100%;
		// padding: 0 30rpx;
		box-sizing: border-box;

		.price {
			margin-top: 20rpx;
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 236rpx;
			padding: 40rpx 44rpx;
			box-sizing: border-box;
		}

		.price_text {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.content {
		margin: 20rpx 0;
		padding: 0 30rpx;

		.record_list {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 0 30rpx;
			box-shadow: 5px 5px 18px 0px rgba(232, 234, 236, 0.51);

			.record_item {
				padding: 38rpx 0;
				border-bottom: 2rpx solid #EEEEEE;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item_price {
					color: #FF8500;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.record_item:last-child {
				border-bottom: none;
			}
		}
	}
</style>
